import React, { Component,Fragment } from 'react';
import {Card,Button,Radio} from 'antd'
import './ui.less'
export default class Buttons extends Component {
    state = {
        loading:false,
        loadingTitle:'开启',
        btnSize: 'default'
    }
    handleClickLoading = () => {
        this.setState({
            loading:!this.state.loading,
            loadingTitle: this.state.loadingTitle === '关闭' ? '开启' : '关闭'
        })
    }
    handleBtnSize = (e) => {
        this.setState({
            btnSize:e.target.value
        })
    }   
    render() {
        return (
        <Fragment>
            <Card title="基础按钮" className="card-wrapper">
                <Button type="primary">Imooc</Button>
                <Button>Imooc</Button>
                <Button type="dashed">Imooc</Button>
                <Button type="danger">Imooc</Button>
                <Button disabled>Imooc</Button>
            </Card>
            <Card title="图形按钮" className="card-wrapper">
                <Button icon="plus">创建</Button>
                <Button icon="edit">编辑</Button>
                <Button icon="delete">删除</Button>
                <Button icon="search" shape="circle"></Button>
                <Button icon="search" type="primary">搜索</Button>
                <Button icon="download" type="primary">下载</Button>
            </Card>
            <Card title="图形按钮" className="card-wrapper">
                <Button loading={this.state.loading} type="primary">确定</Button>
                <Button loading={this.state.loading} shape="circle" type="primary"></Button>
                <Button loading={this.state.loading}>点击加载</Button>
                <Button type="primary" onClick={this.handleClickLoading}>{this.state.loadingTitle}</Button>
            </Card>
            <Card title="按钮组" style={{marginBottom:10}}>
                <Button.Group>
                    <Button icon="left" type="primary">返回</Button>
                    <Button icon="right" type="primary">前进</Button>
                </Button.Group>
            </Card>
            <Card title="基础尺寸" className="card-wrapper">
                <Radio.Group value={this.state.btnSize} onChange={this.handleBtnSize}>
                    <Radio value="small">小</Radio>
                    <Radio value="default">中</Radio>
                    <Radio value="large">大</Radio>
                </Radio.Group>
                <Button size={this.state.btnSize} type="primary">Imooc</Button>
                <Button size={this.state.btnSize}>Imooc</Button>
                <Button size={this.state.btnSize} type="dashed">Imooc</Button>
                <Button size={this.state.btnSize} type="danger">Imooc</Button>
            </Card>
        </Fragment>
    );
  }
}
